Nivo Slider views and Google Analytics

Tracking Nivo slider views using Google Analytics events

If you wish to know how many times each slide has been in full view and thus the opportunity of being viewed by a user then Nivo usefully provides event triggers.

You may note I say that it only provides a count of how many times a user has had the opportunity of viewing a slide because of course the slider may not be within the viewport of a browser. For instance in the case of a long page or if a user has the page open in a tab on their browser which they’re currently not viewing.

Please note there are risks!

Be aware that Google Analytics has a maximum of approximately 500 combined GATC requests (both events and page views) that can be tracked for each visit (user session). This allocation can get quickly used up if you track a number of other events across your website.

$('#slider').nivoSlider({
animSpeed: 750, // Slide transition speed
pauseTime: 4000, // How long each slide will show
// other optional parameters

afterLoad: function(){ // track the view of slide one

var sliderData = $('#slider').data("nivo:vars");
var slideNum = sliderData.currentSlide; // return the slider position
var src = sliderData.currentImage.prop('src'); // extract the image path
var name = src.replace(/^.*/|.jpg|.png$/g, ''); // return the asset name for .png & .jp files

// Google Analytics event tracking
_gaq.push(['_trackEvent', 'Slider', 'view slide ' + slideNum, 'img: '+name], , true );
// category = Slider
// action = View slide x
// opt_label = img: [file name]
// Values = blank
// opt_noninteraction = true {wont effect your bounce rate. If this is not set or
// set to 'false' then you could find your page have a bounce rate of zero}

},

afterChange: function(){ // track subsequent slider views
var sliderData = $('#slider').data("nivo:vars");
var slideNum = sliderData.currentSlide; // return the slider position
var src = sliderData.currentImage.prop('src'); // extract the image path
var name = src.replace(/^.*/|.jpg|.png$/g, ''); // return the asset name of images

_gaq.push(['_trackEvent', 'Slider', 'view slide ' + slideNum, 'img: '+name], , true );
}

});

If you have any comments or queries please don’t hesitate to contact us.